{% if portal_ui %}
<section class="portal-admin-hero portal-admin-tone-{{ portal_ui.tone }}">
    <div class="portal-admin-hero-orb portal-admin-hero-orb-one"></div>
    <div class="portal-admin-hero-orb portal-admin-hero-orb-two"></div>
    <div class="portal-admin-hero-main">
        <span class="portal-admin-icon material-symbols-outlined">{{ portal_ui.icon }}</span>
        <div class="portal-admin-copy">
            <span class="portal-admin-kicker">{{ portal_ui.kicker }}</span>
            <h1>{{ portal_ui.title }}</h1>
            <p>{{ portal_ui.description }}</p>
        </div>
        <div class="portal-admin-actions">
            {% for link in portal_ui.links %}
                <a class="portal-admin-action portal-admin-action-soft" href="{{ link.url }}">
                    <span class="material-symbols-outlined">{{ link.icon|default:'arrow_forward' }}</span>{{ link.label }}
                </a>
            {% endfor %}
            {% if portal_ui.add_url %}
                <a class="portal-admin-action portal-admin-action-primary" href="{{ portal_ui.add_url }}">
                    <span class="material-symbols-outlined">add</span>{{ portal_ui.add_label }}
                </a>
            {% endif %}
        </div>
    </div>
</section>

{% if portal_ui.stats %}
<div class="portal-admin-stats">
    {% for card in portal_ui.stats %}
        <a class="portal-admin-stat portal-admin-stat-{{ card.tone }}" href="{{ card.url|default:'#' }}">
            <span class="portal-admin-stat-icon material-symbols-outlined">{{ card.icon }}</span>
            <span class="portal-admin-stat-copy">
                <small>{{ card.label }}</small>
                <strong>{{ card.value }}</strong>
                <em>{{ card.caption }}</em>
            </span>
            <span class="portal-admin-stat-arrow material-symbols-outlined">north_east</span>
        </a>
    {% endfor %}
</div>
{% endif %}
{% endif %}